<template>
  <view>
    <view class="v-" style="width:100%;height:60px"></view>

    <view class="cu-bar tabbar bg-white fixed-bottom" :style="{backgroundColor: tabBar.backgroundColor}">
      <navigator v-for="(nav, index) in list"
        :key="index"
        open-type="redirect"
        :url="nav.pagePath"
        class="action"
        :class="{'add-action': nav.addAction}"
        :style="{color: (index === current ? tabBar.selectedColor : tabBar.color)}"
      >
        <view v-if="!!nav.iconPath" class="cuIcon-cu-image">
          <image mode="aspectFit" :src="index === current ? nav.selectedIconPath : nav.iconPath"></image>
          <text v-if="nav.type == 'message'" v-show="unreadCount > 0" class="cu-tag badge bg-red position-absolute" style="top:0">{{unreadCount}}</text>
        </view>
        <view v-if="!!nav.iconClass" :class="index === current ? nav.activeIconClass : nav.iconClass"></view>
        <view v-if="nav.addAction" class="cu-btn shadow" :class="nav.addActionClass"></view>
        <view>{{nav.text}}</view>
      </navigator>

    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import CheckAuthMixin from '@/mixins/CheckAuthMixin'

  export default {
    mixins: [
      CheckAuthMixin,
    ],
    name: 'CuBar',
    computed: {
      ...mapState('session', [
        'unreadCount',
      ]),
      bUserType() {
        if (!!this.user) {
          return this.$utils.getUserTypeAsBit(this.user)
        }
      },
      list() {
        const list = [
          {
            pagePath: '/pages/hesuanyuyue/step1/index',
            iconPath: '/static/tabbar/gongneng.png',
            selectedIconPath: '/static/tabbar/gongneng1.png',
            text: '核酸预约'
          },
          {
            pagePath: '/pages/hesuanyuyue/records/index',
            iconPath: '/static/tabbar/my.png',
            selectedIconPath: '/static/tabbar/my1.png',
            text: '我的预约'
          },
          {
            pagePath: '/pages/hesuanyuyue/scan/index',
            iconPath: '/static/tabbar/news.png',
            selectedIconPath: '/static/tabbar/news1.png',
            text: '采样'
          },
        ];

        return list //.filter(it => this.$utils.bitIncludes(it.bUserType, this.bUserType))
      },
      current() {
        const currentPage = getCurrentPages().pop();
        let current
        if (!!currentPage) {
          const currentPath = `/${currentPage.route}`
          current = this.list.findIndex((nav) => nav.pagePath === currentPath)
        }
        return current
      },
    },
    data() {
      return {
        tabBar: {
          color: "#7A7E83",
          selectedColor: "#3DB4FF",
        },
      }
    },
  }
</script>

<style>
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
}
.cu-bar.tabbar {
  border-top: 1px solid #eee;
}
.cu-bar.tabbar .action .cuIcon-cu-image {
  margin-bottom: 2px;
}
.cu-bar.tabbar .action .cuIcon-cu-image image {
  width: 20px;
  height: 20px;
}
</style>
